<template>
  <div>
    <top-header :isLeft="true"></top-header>
    <div class="author">
      <div class="author_message1">
        <p>{{ author }}</p>
        <img :src="getImage(url + icon)" alt="" />
      </div>
      <div class="tar">
        <div>
          <table>
            <tr>
              <td>303</td>
              <td>41283</td>
            </tr>
            <tr>
              <td>关注</td>
              <td>粉丝</td>
            </tr>
          </table>
        </div>
        <div>
          <button class="button1">分享</button>

          <button class="button3" @click="yiguanzhu()" v-if="show == 1">
            已关注
          </button>
          <button class="button2" @click="guanzhu()" v-else>关注</button>
        </div>
      </div>
      <div class="caipu">
        <p class="mycaipu">我的菜谱</p>
        <div class="author_all">
            <div class="author_all" v-for="(item,index) in store" :key="index">
          <div
            v-if="item.content.object.author.name == author"
            class="author_alllist"
          >
            <div>
              <img :src="getImage(item.content.object.photo)" alt="" />
              <div class="author_message">
                <p>{{ item.content.object.name }}</p>
                <div class="user">
                  <img
                    :src="
                      getImage(url + item.content.object.author.image.ident)
                    "
                    alt=""
                  />
                 
                </div>
                 
              </div><p class="username">{{ item.content.object.author.name }}</p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
import QS from "qs";
export default {
  components: { TopHeader },
  data() {
    return {
      url: "https://i2.chuimg.com/",
      store: "",
      author: "",
      icon: "",
      show: "",
    };
  },
  created() {
    this.getparams();
    this.shows();
  },
  methods: {
    getparams() {
      this.store = this.$route.query.store;
      console.log(this.store)
      this.icon = this.$route.query.icon;
      this.author = this.$route.query.author;
    },
    getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    guanzhu() {
      this.show = 1;
      let params = {
        name: this.author,
        icon: this.icon,
        type: 1,
        user_id:localStorage.id
      };
      this.$ajax.post("/mysql/author.php", QS.stringify(params)).then((res) => {
        console.log(res);
      });
    },
    shows() {
      this.$ajax.get("/mysql/authorselect.php",{
        params:{
           id:localStorage.id
        }
       
      }).then((res) => {
        console.log(res);
        let arr = res.data;
        var result = arr.some((item) => {
          if (item.name == this.author) {
            return true;
          }
        });
        console.log(result);
        if (result) {
          this.show = 1;
        }
      });
    },
    yiguanzhu() {
      this.show = 0;
      console.log(this.num);
      this.$ajax
        .get("/mysql/authordel.php", {
          params: {
            name: this.foodauthor,
          },
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.author {
  margin: 0 10px;
  width: 355.2px;
}
.author_message1 {
  width: 100%;
  margin-top: 70px;
  display: inline-block;

  p {
       overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 180px;
    font-size: 25px;
    margin: 30px 20px;
    display: inline-block;
  }
  img {
    float: right;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-right: 20px;
    border-radius: 50%;
  }
}
.tar {
  display: flex;
  justify-content: space-between;
  table {
    width: 100px;
    text-align: center;
  }
  button {
    color: white;
    margin-left: 10px;
    margin-top: 10px;
    height: 35px;
  }
}
.button1 {
  width: 60px;
  border-radius: 5px;
  border: 1px solid rgb(24, 156, 24);
  background: rgb(24, 156, 24);
}
.button2 {
  width: 100px;
  border-radius: 5px;
  border: 1px solid rgb(241, 167, 179);
  background: rgb(241, 167, 179);
}
.button3 {
  width: 100px;
  border-radius: 5px;
  border: 1px solid gray;
  background: gray;
}
.caipu {
  width: 375.2px;
  margin-top: 20px;
  .mycaipu {
    color: black;
    font-size: 20px;
  }

  .author_all {
    width: 340px;
 
    .author_alllist {
      display: flex;
      width: 100%;
   
      img {
        width: 350px;
        height: 280px;
      }
      .author_message {
          margin-top: 10px;
        display: flex;
        justify-content: space-between;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 280px;
          font-size: 25px;
        }
        img {
          margin-right: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        
      }
    }
  }
}
.username {
        font-size: 15px;
       float: right;
        }
</style>